<template>
	<view class="ikz-picker">
		<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="bindTimeChange">
			<view class="picker">
				{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: 'screen',
		props: {
			showData: {
				type: Object
			}
		},
		data( ) {
			return {
				multiArray: [
					[ '今天', '明天' ],
					[ ]
				], // 初始化为空数组
				multiIndex: [ 0, 0 ]
			};
		},
		mounted( ) {
			this.initTimePicker( );
		},
		methods: {
			initTimePicker( ) {
				const now = new Date( );
				const currentHour = now.getHours( );
				const currentMinute = now.getMinutes( );

				// 所有可用的时间段
				const availableTimes = [
					'6:00-6:30', '6:30-7:00', '7:00-7:30', '7:30-8:00', '8:00-8:30', '8:30-9:00',
					'9:00-9:30', '9:30-10:00', '10:00-10:30', '10:30-11:00', '11:00-11:30',
					'11:30-12:00', '12:00-13:30', '12:30-13:00', '13:00-13:30', '13:30-14:00',
					'14:00-14:30', '14:30-15:00', '15:00-16:30', '16:30-17:00', '17:00-17:30',
					'17:30-18:00', '18:00-18:30', '18:30-19:00', '19:00-19:30', '19:30-20:00',
					'20:00-20:30', '20:30-21:00', '21:00-21:30', '21:30-22:00', '22:00-22:30',
					'22:30-23:00'
				];

				// 检查用户选择的是"明天"还是"后天"
				const selectedDay = this.multiArray[ 0 ][ this.multiIndex[ 0 ] ];

				// 如果选择的是"明天"或者"后天"，则不进行时间段过滤
				if ( selectedDay === '明天' ) {
					this.multiArray[ 1 ] = availableTimes; // 将所有时间段赋值
				} else {
					// 当前时间小于时间段的开始时间，进行过滤
					const filteredTimes = availableTimes.filter( time => {
						const [ start, end ] = time.split( '-' );
						const [ startHour, startMinute ] = start.split( ':' ).map( Number );
						const [ endHour, endMinute ] = end.split( ':' ).map( Number );

						// 如果当前时间小于开始时间，则保留该时间段
						if ( currentHour < startHour || ( currentHour === startHour && currentMinute <
								startMinute ) ) {
							return true;
						}
						return false;
					} );

					this.multiArray[ 1 ] = filteredTimes;
				}

				// 设置默认选中的时间段
				if ( this.multiArray[ 1 ].length > 0 ) {
					this.multiIndex = [ 0, 0 ];
				}

				// 触发初始时间选择 
				var e = {
					detail: {
						value: this.multiIndex
					}
				};
				this.bindTimeChange( e );
			},
			bindTimeChange( e ) {
				this.multiIndex = e.detail.value;
				if ( this.multiArray[ 0 ][ this.multiIndex[ 0 ] ] == '今天' ) {
					this.$emit( 'returnTime', this.GetDateStr( 0 ) + ' ' + this.multiArray[ 1 ][ this.multiIndex[ 1 ] ] )
				} else if ( this.multiArray[ 0 ][ this.multiIndex[ 0 ] ] == '明天' ) {
					this.$emit( 'returnTime', this.GetDateStr( 1 ) + ' ' + this.multiArray[ 1 ][ this.multiIndex[ 1 ] ] )
				} 
			},
			GetDateStr( AddDayCount ) {
				var dd = new Date( );
				dd.setDate( dd.getDate( ) + AddDayCount ); //获取AddDayCount天后的日期
				var y = dd.getFullYear( );
				var m = dd.getMonth( ) + 1; //获取当前月份的日期
				var d = dd.getDate( );
				return y + "-" + m + "-" + d;
			},
			closeScreen( ) {
				this.$emit( 'closeScreen', false )
				this.show_info.show = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ikz-picker {
		width: 100%;
	}

	.picker {
		width: 100%;
	}
</style>